<template>
  <div class="popup">
    <el-dialog v-model="isVisible" v-loading="loading" :width="Width" @close="closeModal" :before-close="closeModal"
      :align-center="center" :show-close="false" :close-on-click-modal="false">
      <div class="header" v-if="$slots.header">
        <slot name="header"></slot>
      </div>
      <div class="el-dialog__header" v-else>
        <div class="my-header">
          <div>{{ title }}</div>
          <pb-icon name="close" color="#000" size="12" class="icon" @click="closeModal" v-show="closeIcon"></pb-icon>
        </div>
        <div class="solid"></div>
      </div>
      <!-- 自定义插槽中心内容区 -->
      <div class="center">
        <slot>
        </slot>
      </div>
      <!-- 自定义插槽底部 -->
      <div v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
      <div class="el-dialog__footer" v-else>
        <div class="solid"></div>
        <div class="dialog-footer">
          <pb-button size="small" @click="closeModal" secondary class="Leftbt" v-if="closeIcon">{{ cancelText
            }}</pb-button>
          <pb-button size="small" @click="handleClose" v-if="showConfirm">
            {{ ConfirmText }}
          </pb-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineEmits, defineProps } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '标题'
  },
  ConfirmText: {
    type: String,
    default: '确认'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  Width: {
    type: Number,
    default: 848
  },
  loading: {
    type: Boolean,
    default: false
  },
  center: {
    type: Boolean,
    default: true,
  },
  showConfirm: {
    type: Boolean,
    default: true
  },
  closeIcon: {
    type: Boolean,
    default: true
  },
})
const emit = defineEmits(['cancelFn', 'confirmFn', 'update:modelValue'])

const isVisible = ref(props.isVisible);
const closeModal = () => {
  emit('update:modelValue', false)
  // 取消关闭弹窗时父组件 isVisible 设为 false
  emit('cancelFn', false)
};
// 注意 确认操作时 触发父组件函数时 也把弹框关闭isVisible 设为 false
const handleClose = () => {
  emit('confirmFn')
}

watch(() => props.modelValue, (newVal) => {
  // 监听弹窗关闭条件
  isVisible.value = newVal;
});
</script>

<style lang="scss">
.popup {
  .el-dialog {
    padding: 0
  }
}
</style>
<style lang="scss" scoped>
.popup {
  .my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin: 0 16px 16px 16px;

  }

  .solid {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
    ;
  }

  .dialog-footer {
    margin: 16px 16px 0 16px;
    padding-bottom: 16px;
  }

  .center {
    margin: 0 24px;
  }

  .icon {
    cursor: pointer;
  }

  .Leftbt {
    margin-right: 8px;
  }
}
</style>